<template>
  <div class="app">
    <div class="tabs">
      <template v-for="(item, index) in tabs" :key="index">
        <button :class="{ active: index === curentIndex }" @click="itemClick(index)">{{ item }}</button>
      </template>
    </div>

    <div class="view">
      <!--1. 第一种做法,使用v-if判断-->
      <template v-if="curentIndex === 0">
        <Home />
      </template>
      <template v-else-if="curentIndex === 1">
        <About />
      </template>
      <template v-else-if="curentIndex === 2">
        <Category />
      </template>
      <!--2. 第二种做法,使用动态组件component-->
      <!--is中的组件来自两个地方,1.全局注册的组件, 2.局部注册的组件  is中的组件名称符合元素命名规则-->
      <component :is="tabs[curentIndex]"></component>
      <hr>
      <!--3. 动态组件传值-->
      <component name="app传递" 
        :age="18" 
        :is="tabs[curentIndex]"
        @homeClick="homeClick">
      </component>
    </div>
  </div>
</template>

<script>
  import Home from './views/Home.vue'
  import About from './views/About.vue'
  import Category from './views/Category.vue'

  export default {
    data() {
      return {
        tabs: ['home', 'about', 'category'],
        curentIndex: 0
      }
    },
    methods: {
      itemClick(index) {
        this.curentIndex = index
      },
      homeClick(payload) {
        console.log('homeClick: ' , payload)
      }
    },
    components: {
      Home,
      About,
      Category
    }
  }
</script>

<style scoped>
  .active {
    color: red;
  }
</style>